<script setup lang="ts">
import PieView from './components/PieView.vue'
import PackTable from './components/PackTable.vue'
import Condition from './components/Condition.vue'
import CompletionRate from './components/CompletionRate.vue'
import { time } from 'echarts'
import { ref, onMounted, onUnmounted, watch, getCurrentInstance } from 'vue'

const that = getCurrentInstance() as any;

const formatTime = () => {
  let data = new Date()
  return `${('' + data.getHours()).padStart(2, '0')}:${('' + data.getMinutes()).padStart(2, '0')}:${('' + data.getSeconds()).padStart(2, '0')}`
}

const formatDate = () => {
  let data = new Date()
  return `${data.getFullYear()}-${(data.getMonth() + 1 + '').padStart(2, '0')}-${('' + data.getDate()).padStart(2, '0')} `
}

const dateStr = ref(formatDate())
const timeStr = ref(formatTime())
let timerId: number;


const screenWidth = ref(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);

onMounted(() => {
  timerId = setInterval(() => {
    dateStr.value = formatDate();
    timeStr.value = formatTime();
  }, 1000);

  window.onresize = () => {
    screenWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  }
})

watch(() => screenWidth.value, val => {
  that.ctx.$forceUpdate();
})

onUnmounted(() => {
  if (timerId) clearInterval(timerId);
})
</script>

<template>
  <div id="head" style="color: #ebffff; font-size: 40px">
    <div id="title">包装生产资讯</div>
    <div id="time">
      <span>
        {{ dateStr }}
      </span>
      <span>
        {{ timeStr }}
      </span>
    </div>
  </div>
  <div id="main">
    <div id="header" class="border-radius">
      <PackTable style="
          width: 98%;
          position: relative;
          margin: 0 auto;
        " />
    </div>
    <div id="midden" class="border-radius">
      <CompletionRate />
    </div>
    <div id="left-bottom" class="border-radius">
      <!-- <CompletionRate /> -->
      <PieView style="width: 100%; height: 100%;" />
    </div>
    <div id="right-bottom" class="border-radius">
      <div
        style="color: red; font-size: 20px; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);">
        当前缴库量与目标差异20双，请立即追踪缴库
      </div>
    </div>
  </div>
</template>

<style scoped>
body {
  padding: 0;
  margin: 0;
  font-family: "微软雅黑";
}

#head {
  position: absolute;
  width: 100%;
  height: 8%;
}

#title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 8%;
}

#time {
  position: absolute;
  display: inline-block;
  right: 0;
  bottom: 0;
  font-size: 30px;
}

#time span:first-child {
  font-size: 40px;
}

#head #title {
  font-family: '宋体';
  display: inline-block;
}

#main {
  position: absolute;
  width: 100%;
  height: 92%;
  top: 8%;
  margin: 0 auto;
}

.border-radius {
  background:
    linear-gradient(to bottom, #33cdfa 2px, transparent 3px, transparent 100%) left top no-repeat,
    linear-gradient(to right, #33cdfa 2px, transparent 3px, transparent 100%) left top no-repeat,
    linear-gradient(to bottom, #33cdfa 2px, transparent 3px, transparent 100%) right top no-repeat,
    linear-gradient(to left, #33cdfa 2px, transparent 3px, transparent 100%) right top no-repeat,
    linear-gradient(to top, #33cdfa 2px, transparent 3px, transparent 100%) left bottom no-repeat,
    linear-gradient(to right, #33cdfa 2px, transparent 3px, transparent 100%) left bottom no-repeat,
    linear-gradient(to top, #33cdfa 2px, transparent 3px, transparent 100%) right bottom no-repeat,
    linear-gradient(to left, #33cdfa 2px, transparent 3px, transparent 100%) right bottom no-repeat,
    linear-gradient(to bottom, #2d5185 1px, transparent 1px, transparent 100%) left top 1px repeat no-repeat,
    linear-gradient(to top, #2d5185 1px, transparent 1px, transparent 100%) left bottom 1px repeat no-repeat,
    linear-gradient(to right, #2d5185 1px, transparent 1px, transparent 100%) left 1px top no-repeat repeat,
    linear-gradient(to left, #2d5185 1px, transparent 1px, transparent 100%) right 1px top no-repeat repeat;
  background-size: 1rem 1rem;
}

#header {
  position: absolute;
  width: 100%;
  height: 50%;
}

#left-bottom {
  position: absolute;
  top: calc(65% + 10px);
  left: 0;
  bottom: 2%;
  right: calc(35% - 5px);
}

#right-bottom {
  position: absolute;
  top: calc(65% + 10px);
  left: calc(65% + 10px);
  bottom: 2%;
  right: 0;
}

#midden {
  position: absolute;
  top: calc(50% + 5px);
  left: 0;
  height: 15%;
  right: 0;
}

@media (min-width: 1024px) {}
</style>
